<template>
  <div>
    <dg-making-form
      ref="makingForm"
      upload
      preview
      generate-code
      generate-json
      clearable
      @change="handleChange"
      style="height: 600px;"
      @fileUpload="fileUpload"
    >
      <template slot="action"></template>
    </dg-making-form>
  </div>
</template>

<script>

export default {
  data() {
    return {
      basicComponents: [
        {
          type: "imgupload",
          name: "图片",
          icon: "icon-tupian",
          model: 'testImage',
          options: {
            defaultValue: [],
            size: {
              width: 100,
              height: 100
            },
            headers: {},
            width: "",
            tokenFunc: "funcGetToken",
            token: "",
            // domain: 'http://pfp81ptt6.bkt.clouddn.com/',
            domain: "http://192.168.0.14/",
            disabled: false,
            length: 1,
            multiple: false,
            isQiniu: false,
            isDelete: false,
            min: 0,
            isEdit: false,
            action: "http://192.168.1.249:4013/md/upload/file"
          }
        },
        {
          type: "fileupload",
          name: "文件",
          icon: "icon-tupian",
          model: 'testFile',
          options: {
            size: {
              width: 100,
              height: 100,
            },
            defaultValue: [],
            width: "",
            tokenFunc: "funcGetToken",
            headers: {},
            token: "",
            domain: "http://pfp81ptt6.bkt.clouddn.com/",
            multiple: true,
            autoUpload: false,
            limit: 9,
            tip: "",
            listType: 'picture',
            drag: true,
            disabled: true,
            // action: "https://jsonplaceholder.typicode.com/photos/"
            // action: "http://192.168.0.14/"
            action: "http://192.168.1.249:4013/md/upload/file"
          }
        },
        {
          type: "input",
          name: "姓名",
          icon: "icon-input",
          model: "line",
          options: {
            width: "100%",
            defaultValue: "",
            required: false,
            dataType: "string",
            pattern: "",
            placeholder: "",
            disabled: false,
            remoteFunc: "func_name"
          }
        },
        {
          type: "textarea",
          name: "介绍",
          icon: "icon-diy-com-textarea",
          model: "js",
          options: {
            width: "100%",
            defaultValue: "",
            required: false,
            disabled: false,
            pattern: "",
            placeholder: "",
            remoteFunc: "func_js"
          }
        },
        {
          type: "radio",
          name: "单选框组",
          icon: "icon-radio-active",
          options: {
            inline: true,
            defaultValue: "",
            showLabel: false,
            options: [
              {
                value: "选项1",
                label: "选项1"
              },
              {
                value: "选项2",
                label: "选项2"
              },
              {
                value: "选项3",
                label: "选项3"
              }
            ],
            required: false,
            width: "",
            remote: false,
            remoteOptions: [],
            props: {
              value: "value",
              label: "label"
            },
            remoteFunc: "func_sex",
            disabled: false
          }
        }
      ]
    };
  },
  mounted() {},
  methods: {
    handleChange(ev) {
      console.log("ev", ev);
    },
    fileUpload(e) {
      console.log("fileUpload++ : ", e);
    }
  }
};
</script>
